<template>
 <div style="width: 100%;min-height: 100vh;">

  <div style="width: calc(100% - 70px);height: 60px;background-color: var(--color-neutral-1);z-index: 10000;position: fixed;left: 70px;top: 0;backdrop-filter: blur(20px);"
    :style="{
      backgroundColor:appData.theme.translucentBackground,

    }"
  >
    <div style="width: 100%;text-align: center;padding: 12px 0;border-bottom: 1px solid var(--color-neutral-3);">
      <div style="position: relative;display: inline-block;width: 90%;max-width: 475px;">
        <input @keypress="(e)=>{
          if(e.code=='Enter'){data.searchForm.page = 1;getInputResult();data.showSearchRecomment=false}
        }" @focus="data.showSearchRecomment = true" @input="searchInput()" class="searchInput" v-model="data.searchForm.input" placeholder="搜索学校、专业" style="line-height: 36px;font-size: 14px;border-radius: 5px;padding: 0 10px;width: 100%;color: var(--color-neutral-10);" type="text"
        :style="{
          backgroundColor:appData.theme.background
        }"
        />
        <svg @click="data.searchForm.input = ''" v-if="data.searchForm.input!=''" style="position: absolute;right: 8px;top: 8px;cursor: pointer;color: var(--color-neutral-10);" width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
        <div class="searchRecommendForm" v-if="data.searchForm.input!='' && data.showSearchRecomment" style="width: 100%;border-radius: 5px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);margin-top: 5px;position: absolute;text-align: left;overflow: hidden;z-index: 21000"
          :style="{
            backgroundColor:appData.theme.background
          }"
        >
          <div class="item" @click="()=>{
            data.searchForm.page = 1
            data.results = JSON.parse(JSON.stringify(data.resultsM))
            data.searchForm.searchType = 0
            data.searchForm.searchTypeName = '学校'
            getInputResult()
            data.showSearchRecomment = false
          }">搜索学校“{{ data.searchForm.input }}”</div>
          <div class="item" @click="()=>{
            data.searchForm.page = 1
            data.results = JSON.parse(JSON.stringify(data.resultsM))
            data.searchForm.searchType = 1
            data.searchForm.searchTypeName = '专业'
            getInputResult()
            data.showSearchRecomment = false
          }">搜索专业“{{ data.searchForm.input }}”</div>
        </div>
      </div>
    </div>
  </div>

  <div style="width: 100%;max-width: 1940px;margin: 0 auto;overflow: hidden;padding-bottom: 40px;margin-top: 60px;"

  >

    <div style="width: 100%;padding: 40px 44px;padding-bottom: 0;"

    >

      <div

      >
        <span style="margin-right: 10px;color: var(--color-neutral-10);">
        <span style="position: absolute;">搜索类型</span>
        <a-select @change="()=>{
          data.searchForm.input = ''
          getInputResult()
        }" :disabled="data.searching" v-model="data.searchForm.searchTypeName" style="width: 80px;border: 1px solid var(--color-neutral-4);border-bottom: 1px solid var(--color-neutral-6);border-radius: 5px;  height: 35px;margin-top: 24px;"
          :style="{
            backgroundColor:appData.theme.background
          }"
        >
          <a-option v-for="item in ['学校','专业']">{{ item }}</a-option>
        </a-select>
      </span>
      
      <span v-if="data.searchForm.searchType==0" style="margin-right: 10px;color: var(--color-neutral-10);">
        <span style="position: absolute;">省份</span>
        <a-select :disabled="data.searching" v-model="data.searchForm.p" style="width: 95px;border: 1px solid var(--color-neutral-4);border-bottom: 1px solid var(--color-neutral-6);border-radius: 5px;  height: 35px;margin-top: 24px;"
          :style="{
            backgroundColor:appData.theme.background
          }"
        >
          <a-option v-for="item in data.provinces">{{ item }}</a-option>
        </a-select>
      </span>
      <br v-if="appData.pageSize.width<575">
      <span style="margin-right: 10px;color: var(--color-neutral-10);">
        <span style="position: absolute;">{{ data.searchForm.searchType==0?'办学类型':'层次' }}</span>
        <a-select :disabled="data.searching" v-model="data.searchForm.lx" style="width: 80px;border: 1px solid var(--color-neutral-4);border-bottom: 1px solid var(--color-neutral-6);border-radius: 5px;  height: 35px;margin-top: 24px;"
          :style="{
            backgroundColor:appData.theme.background
          }"
        >
          <a-option v-for="item in ['全部','本科','专科']">{{ item }}</a-option>
        </a-select>
      </span>
      
      <span v-if="data.searchForm.searchType==0" style="margin-right: 10px;color: var(--color-neutral-10);">
        <span style="position: absolute;">特色</span>
        <a-select :disabled="data.searching" v-model="data.searchForm.ts" style="width: 110px;border: 1px solid var(--color-neutral-4);border-bottom: 1px solid var(--color-neutral-6);border-radius: 5px;  height: 35px;margin-top: 24px;"
          :style="{
            backgroundColor:appData.theme.background
          }"
        >
          <a-option v-for="item in ['全部','985','211','双一流','强基计划']">{{ item }}</a-option>
        </a-select>
      </span>
      <br v-if="appData.pageSize.width<925">
      <span v-if="data.searchForm.searchType==0" style="margin-right: 10px;color: var(--color-neutral-10);">
        <span style="position: absolute;">性质</span>
        <a-select :disabled="data.searching" v-model="data.searchForm.xz" style="width: 220px;border: 1px solid var(--color-neutral-4);border-bottom: 1px solid var(--color-neutral-6);border-radius: 5px;  height: 35px;margin-top: 24px;"
          :style="{
            backgroundColor:appData.theme.background
          }"
        >
          <a-option v-for="item in ['全部','公办','民办','内地与港澳台地区合作办学','中外合作办学']">{{ item }}</a-option>
        </a-select>
      </span>
      <br v-if="appData.pageSize.width<575">
      <span v-if="data.searchForm.searchType==0" style="margin-right: 10px;color: var(--color-neutral-10);">
        <span style="position: absolute;">类别</span>
        <a-select :disabled="data.searching" v-model="data.searchForm.lb" style="width: 95px;border: 1px solid var(--color-neutral-4);border-bottom: 1px solid var(--color-neutral-6);border-radius: 5px;  height: 35px;margin-top: 24px;"
          :style="{
            backgroundColor:appData.theme.background
          }"
        >
          <a-option v-for="item in ['全部','综合类','政法类','语言类','艺术类','医药类','体育类','师范类','农林类','民族类','理工类','军事类','财经类']">{{ item }}</a-option>
        </a-select>
      </span>
      <br v-if="appData.pageSize.width<1315">
      <span v-if="data.searchForm.searchType==0 && homeData.loginedUserInfo!=undefined && homeData.loginedUserInfo.isVIP==1" style="margin-right: 10px;color: var(--color-neutral-10);">
        <span style="position: absolute;">只显示可能被录取的学校</span>
        <div style="width: 245px;display: inline-block;height: 36px;position: relative;padding-top: 4px;border: 1px solid var(--color-neutral-4);border-radius: 3px;padding-left: 3px;margin-top: 24px;">
          <span>启用</span>
          <a-switch v-model="data.searchForm.admittedOnly" :disabled="data.searching" style="margin-left: 5px;"></a-switch>
          <span 
            :style="{
              opacity:data.searchForm.admittedOnly?1:0
            }"
          style="margin-left: 5px;">上浮</span>
          <input 
            :style="{
              opacity:data.searchForm.admittedOnly?1:0
            }"
          :disabled="data.searching || data.searchForm.admittedOnly==false" v-model="data.searchForm.scoreUp" type="number" style="height: 25px;width: 40px;border: 1px solid var(--color-neutral-3);outline: none;border-radius: 3px;position: relative;top: 1px;font-size: 12px;color: var(--color-neutral-10);margin-left: 5px;" />
          <span 
            :style="{
              opacity:data.searchForm.admittedOnly?1:0
            }"
          style="margin-left: 5px;">下降</span>
          <input 
            :style="{
              opacity:data.searchForm.admittedOnly?1:0
            }"
          :disabled="data.searching || data.searchForm.admittedOnly==false" v-model="data.searchForm.scoreDown" type="number" style="height: 25px;width: 40px;border: 1px solid var(--color-neutral-3);outline: none;border-radius: 3px;position: relative;top: 1px;font-size: 12px;color: var(--color-neutral-10);margin-left: 5px;" />
        </div>
      </span>
      <br v-if="appData.pageSize.width<575">
      <span>
        <button :disabled="data.searching" style="padding: 6px 20px;margin-right: 10px;" @click="()=>{
          data.searchForm.p = '全部'
          data.searchForm.ts = '全部'
          data.searchForm.xz = '全部'
          data.searchForm.lx = '全部'
          data.searchForm.lb = '全部'
          data.searchForm.input = ''
          data.searchForm.admittedOnly = false
          data.searchForm.scoreUp = 20
          data.searchForm.scoreDown = 30
        }">重置</button>
        <button :disabled="data.searching" style="padding: 6px 20px;" @click="data.searchForm.page = 1;data.searchForm.page = 1;getInputResult()">搜索</button>
      </span>
      </div>
      
      <div>
        <div style="width: calc(100vw - 70px);position: absolute;left: 0;background: linear-gradient(180deg, rgba(0,120,215,0.1), transparent);height: 200px;transform: translateY(-15px);">

        </div>
        <p style="margin-top: 40px;font-size: 20px;position: relative;color: var(--color-neutral-10);">{{ data.searchForm.searchType==0?'学校':'专业' }}列表</p>
        <p style="font-size: 12px;position: relative;color: var(--color-neutral-10);">共{{ data.total }}个搜索结果</p>
      </div>
      
      <div style="margin-top: 20px;width: calc(100% + 20px);position: relative;">

        <div v-if="data.searchForm.searchType==0">
          <div v-for="item in data.results" style="border-radius: 5px;display: inline-block;margin-bottom: 24px;"
               :style="{
        width:'calc(100% / ' + data.lineShowNum.toString() + ')'
      }"
          >
            <div class="sritem" style="width: calc(100% - 24px);"
                 :style="{
                height:'240px',
                backgroundColor:appData.theme.background
            }"
            >
              <div v-if="item.sk!=true" style="position: absolute;width: calc(100% - 32px);word-break: break-all;overflow: hidden;max-height: 200px;">
                <p style="font-size: 18px;font-weight: bold;">{{ item.universityName }}</p>
                <p >位于{{ getSchoolLocationName(item)  }}</p>
                <p >办学类型：{{ item.level  }}</p>
                <p v-if="getSchoolLX(item)!=false">特色：{{ getSchoolLX(item)  }}</p>
                <p >性质：{{ item.school_nature_name  }}</p>
                <p v-if="item.type_name!=''">类别：{{ item.type_name  }}</p>
                <p v-if="item.old_name!=''">旧名：{{ item.old_name  }}</p>
                <p v-if="item.short!=''">简称：{{ item.short  }}</p>
                <p v-if="item.more!=undefined">录取概率：{{ parseInt(item.more.rate.all*10000)/100  }}%
                  <span v-if="item.more.rate.all>=0.2 && item.more.rate.all<0.5" style="padding: 0px 2px;border-radius: 3px;background-color: #ff8c00;color: white;margin-left: 5px;">冲</span>
                  <span v-if="item.more.rate.all>=0.5 && item.more.rate.all<0.8" style="padding: 0px 2px;border-radius: 3px;background-color: rgb(0,120,215);color: white;margin-left: 5px;">稳</span>
                  <span v-if="item.more.rate.all>=0.8" style="padding: 0px 2px;border-radius: 3px;background-color: #008000;color: white;margin-left: 5px;">保</span>
                </p>
                <p v-if="item.more!=undefined">最高录取概率专业：{{ item.more.majorName }}</p>
              </div>
              <div @click="schoolItemClick(item.mark,item)" v-if="item.sk!=true" class="item-wrapper" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(128,128,128,0.1);z-index: 200;"></div>
            </div>
          </div>
        </div>

        <div v-if="data.searchForm.searchType==1">

          <div v-if="homeData.showLoading==false">
            <div v-for="item1 in data.results">
              <p style="font-size: 24px;margin-bottom: 10px;color: var(--color-neutral-10)">{{ fileDBGroupedResultGetCurrentGroupTitle(item1,'level') }}</p>
              <div v-for="item2 in item1">
                <p style="font-size: 20px;margin-bottom: 10px;color: var(--color-neutral-10)">{{ fileDBGroupedResultGetCurrentGroupTitle(item2,'className') }}</p>
                <div v-for="item3 in item2">
                  <p style="font-size: 16px;font-weight: bold;margin-bottom: 10px;color: var(--color-neutral-10)">{{ fileDBGroupedResultGetCurrentGroupTitle(item3,'bigClassName') }}</p>
                  <div v-for="item in item3" style="border-radius: 5px;display: inline-block;margin-bottom: 24px;"
                       :style="{
        width:'calc(100% / ' + data.lineShowNum.toString() + ')'
      }"
                  >
                    <div class="sritem" style="width: calc(100% - 24px);"
                         :style="{
                height:'140px',
                backgroundColor:appData.theme.background
            }"
                    >
                      <div style="position: absolute;width: calc(100% - 32px);word-break: break-all;overflow: hidden;max-height: 200px;">
                        <p style="font-size: 18px;font-weight: bold;">{{ item.majorName }}</p>
                        <p >学制：{{ item.year }}</p>
                        <p >学士学位名称：{{ item.degree  }}</p>
                        <p v-if="item.sel_adv!=''">科目：{{ item.sel_adv  }}</p>
                      </div>
                      <div @click="()=>{
                      data.currentSpecial.selected = item
                      getSpecialInfo(item.mark)
                    }" v-if="item.sk!=true" class="item-wrapper" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(128,128,128,0.1);z-index: 200;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-if="homeData.showLoading==true">
            <div v-for="item in data.resultsM" style="border-radius: 5px;display: inline-block;margin-bottom: 24px;"
                 :style="{
        width:'calc(100% / ' + data.lineShowNum.toString() + ')'
      }"
            >
              <div class="sritem" style="width: calc(100% - 24px);"
                   :style="{
                height:'140px',
                backgroundColor:appData.theme.background
            }"
              >

              </div>
            </div>
            <div v-for="item in data.resultsM.slice(0,16)" style="border-radius: 5px;display: inline-block;margin-bottom: 24px;"
                 :style="{
        width:'calc(100% / ' + data.lineShowNum.toString() + ')'
      }"
            >
              <div class="sritem" style="width: calc(100% - 24px);"
                   :style="{
                height:'140px',
                backgroundColor:appData.theme.background
            }"
              >

              </div>
            </div>
          </div>

        </div>

      <div v-if="func.getPageTotal!=undefined && func.getPageTotal(data.total,data.searchForm.size)>1" style="width: 100%;padding-right: 20px;text-align: right;">
        <button :disabled="data.searchForm.page==1 || data.searching" @click="()=>{
          data.searchForm.page = 1
          getInputResult()
        }">第一页</button>
        <button :disabled="data.searchForm.page==1 || data.searching" style="margin-left: 10px;" @click="()=>{
          data.searchForm.page-=1
          getInputResult()
        }">上一页</button>
        <a-trigger trigger="click" :unmount-on-close="false">
          <button @click="data.searchForm.warningText = ''" v-if="func.getPageTotal!=undefined" style="margin-left: 10px;">{{ data.searchForm.page.toString() + '/' + func.getPageTotal(data.total,data.searchForm.size).toString() }}</button>
          <template #content>
            <div style="padding: 10px 10px;border-radius: 10px;box-shadow: 0 1px 3px rgba(128,128,128,0.2);"
              :style="{
                backgroundColor:appData.theme.background
              }"
            >
              <input v-model="data.searchForm.toPage" type="number" style="height: 35px;outline: none;background-color: rgba(0,0,0,0.1);border-radius: 5px;padding: 0 5px;width: 120px;margin-right: 10px;color: var(--color-neutral-10);" /><button :disabled="data.searching" @click="()=>{
                data.searchForm.warningText = ''
                if(data.searchForm.toPage<1 || data.searchForm.toPage>func.getPageTotal(data.total,data.searchForm.size)){
                  data.searchForm.warningText = '输入的页码不能超出页码范围'
                  return
                }
                data.searchForm.page = data.searchForm.toPage
                getInputResult()
              }">转到</button>
              <p v-if="data.searchForm.warningText!=''" style="color: red;margin-top: 5px;">{{ data.searchForm.warningText }}</p>
            </div>
          </template>
        </a-trigger>
        <button :disabled="func.getPageTotal(data.total,data.searchForm.size)==data.searchForm.page || data.searching" style="margin-left: 10px;" @click="()=>{
          data.searchForm.page+=1
          getInputResult()
        }">下一页</button>
        <button :disabled="func.getPageTotal(data.total,data.searchForm.size)==data.searchForm.page || data.searching" style="margin-left: 10px;" @click="()=>{
          data.searchForm.page = func.getPageTotal(data.total,data.searchForm.size)
          getInputResult()
        }">最后一页</button>
      </div>

      </div>
      
    </div>
  </div>



   <div id="schoolDetailForm" style="width: calc(100% - 70px);height: calc(100vh - 60px);position: fixed;right:0;bottom: 0;overflow-y: scroll;opacity: 0;scale: 1.01;transition-property: opacity,scale ;transition-duration: .3s;transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);padding-bottom: 60px;z-index: 1001;overflow-x: auto;"
        :style="{
      backgroundColor:appData.theme.background,
      display:data.showSchollDeialForm!=-1?'unset':'none',
      opacity:data.showSchollDeialForm==1?'1':'0',
      scale:data.showSchollDeialForm==1?'1':'1.01'
    }"
   >
     <div v-if="data.currentDisplayUniversityInfoByClick!=undefined" style="width: 100%;max-width: 1940px;margin: 0 auto;position: relative;min-width: 900px;height: 100%">

       <div style="height: 110px;padding: 40px 44px;padding-bottom: 0">
         <p style="font-size: 24px;display: inline-block;color:var(--color-neutral-10)">
           <span style="line-height: 36px">{{ data.currentDisplayUniversityInfoByClick.universityName }}</span>
           <button :disabled="homeData.showLoading" @click="favoriteSchoolClick" v-if="data.currentDisplayUniversityInfo!=undefined && data.currentDisplayUniversityInfo.isFavorited==false && homeData.loginedUserInfo!=undefined" variant="outlined" style="font-size: 14px;margin-left: 10px;padding: 3.5px 7px">收藏本校</button>
           <button :disabled="homeData.showLoading" @click="disFavoriteSchoolClick" v-if="data.currentDisplayUniversityInfo!=undefined && data.currentDisplayUniversityInfo.isFavorited==true && homeData.loginedUserInfo!=undefined" variant="outlined" style="font-size: 14px;margin-left: 10px;padding: 3.5px 7px">取消收藏本校</button>
           <button :disabled="homeData.showLoading" @click="openLink(data.currentDisplayUniversityInfo.school_site)" v-if="data.currentDisplayUniversityInfo!=undefined && data.currentDisplayUniversityInfo!=undefined" variant="outlined" style="font-size: 14px;margin-left: 10px;padding: 3.5px 7px">学校官网</button>
           <button :disabled="homeData.showLoading" @click="controlForward(true,3,data.currentDisplayUniversityInfoByClick.mark)" v-if="data.currentDisplayUniversityInfo!=undefined && data.currentDisplayUniversityInfo!=undefined && homeData.loginedUserInfo!=undefined" variant="outlined" style="font-size: 14px;margin-left: 10px;padding: 3.5px 7px">转发</button>
         </p>
         <br>
         <p style="font-size: 12px;margin-top: 10px;display: inline-block;">
           <span style="padding: 5px 5px;border-radius: 5px;background-color: var(--color-neutral-2);color: var(--color-neutral-10);margin-right: 5px;">{{ getSchoolLocationName(data.currentDisplayUniversityInfoByClick) }}</span>
           <span style="padding: 5px 5px;border-radius: 5px;background-color: var(--color-neutral-2);color: var(--color-neutral-10);margin-right: 5px;">{{ data.currentDisplayUniversityInfoByClick.school_nature_name }}</span>
           <span v-if="data.currentDisplayUniversityInfoByClick.type_name!=undefined" style="padding: 5px 5px;border-radius: 5px;background-color: var(--color-neutral-2);color: var(--color-neutral-10);margin-right: 5px;">{{ data.currentDisplayUniversityInfoByClick.type_name }}</span>
           <span style="padding: 5px 5px;border-radius: 5px;background-color: var(--color-neutral-2);color: var(--color-neutral-10);margin-right: 5px;">{{ data.currentDisplayUniversityInfoByClick.level }}</span>
           <span v-for="item in getSchoolLX(data.currentDisplayUniversityInfoByClick).split('、')==false?[]:getSchoolLX(data.currentDisplayUniversityInfoByClick).split('、')" style="padding: 5px 5px;border-radius: 5px;background-color: var(--color-neutral-2);color: var(--color-neutral-10);margin-right: 5px;">{{ item }}</span>
         </p>
         <svg style="cursor: pointer;color: var(--color-neutral-10);position: absolute;right: 44px;top: 40px;backdrop-filter: blur(5px);z-index: 10000" @click="controlSchoolForm(false)" width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
       </div>

       <div style="margin-top: 20px;height: calc(100% - 70px);overflow-y: scroll;padding: 40px 44px;padding-top: 0;overflow-y: scroll;">
         <a-carousel
             :style="{
            width: '40%',
            height: '350px',
          }"
             style="position: relative;background-color: var(--color-neutral-1);border-radius: 5px;overflow: hidden;display:inline-block;background-color: var(--color-neutral-2);float:right;"
             :auto-play="true"
             :indicator-type="false"
             transition-timing-function="cubic-bezier(0.23, 1, 0.320, 1)"

         >
           <a-carousel-item v-if="data.currentSchoolImages.length==0" style="line-height: 350px;text-align: center;color: var(--color-neutral-10)">
             暂无图片
           </a-carousel-item>
           <a-carousel-item style="width: 100%;height: 100%" v-for="image in data.currentSchoolImages">
             <div style="width: 100%;height:100%;background-position: center;background-repeat: no-repeat;background-size: contain;border-radius: 5px;"
                  :style="{
                backgroundImage:'url(' + image + ')'
              }"
             ></div>
           </a-carousel-item>
         </a-carousel>

         <div v-if="data.currentDisplayUniversityInfo!=undefined" style="width: 60%;height:350px;color: var(--color-neutral-10);padding-right: 10px;position: relative">

           <div style="width: 100%;position: relative">
             <div class="sritem" style="width: calc(50% - 5px);margin-right: 10px;display: inline-block;height: 88px" @click="openLink(data.currentDisplayUniversityInfo.school_site)">
               <p style="font-weight: bold">学校官网</p>
               <p>{{data.currentDisplayUniversityInfo.school_site}}</p>
             </div>
             <div class="sritem" style="width: calc(50% - 5px);display: inline-block;height: 88px">
               <p style="font-weight: bold">学校地址</p>
               <p>{{data.currentDisplayUniversityInfo.address}}</p>
             </div>
           </div>

           <div style="width: 100%;position: relative;margin-top: 7px">
             <div class="sritem" style="width: calc(50% - 5px);margin-right: 10px;display: inline-block;height: 88px">
               <p style="font-weight: bold">招生电话</p>
               <p>{{data.currentDisplayUniversityInfo.phone}}</p>
             </div>
             <div class="sritem" style="width: calc(50% - 5px);display: inline-block;height: 88px">
               <p style="font-weight: bold">电子邮箱</p>
               <p>{{data.currentDisplayUniversityInfo.email}}</p>
             </div>
           </div>

           <div style="width: 100%;position: relative;margin-top: 7px">
             <div class="sritem" style="width: calc(50% - 5px);margin-right: 10px;display: inline-block;height: 88px">
               <p style="font-weight: bold">建校年份</p>
               <p>{{data.currentDisplayUniversityInfo.create_date}}</p>
             </div>
             <div class="sritem" style="width: calc(50% - 5px);display: inline-block;height: 88px">
               <p style="font-weight: bold">主管部门</p>
               <p>{{data.currentDisplayUniversityInfo.belong}}</p>
             </div>
           </div>

           <div>
             <div @click="data.currentSchoolPage=0" :class="data.currentSchoolPage==0?['sritem-selected']:['sritem-ns']" style="margin-top: 9px;display: inline-block;margin-right: 10px;width: calc((100% + 10px) / 4 - 10px);text-align: center">学校概况</div>
             <div @click="data.currentSchoolPage=1" :class="data.currentSchoolPage==1?['sritem-selected']:['sritem-ns']" style="margin-top: 9px;display: inline-block;margin-right: 10px;width: calc((100% + 10px) / 4 - 10px);text-align: center">分数/计划</div>
             <div @click="data.currentSchoolPage=2" :class="data.currentSchoolPage==2?['sritem-selected']:['sritem-ns']" style="margin-top: 9px;display: inline-block;margin-right: 10px;width: calc((100% + 10px) / 4 - 10px);text-align: center">开设专业</div>
             <div @click="data.currentSchoolPage=3;showSchoolJobChart()" :class="data.currentSchoolPage==3?['sritem-selected']:['sritem-ns']" style="margin-top: 9px;display: inline-block;margin-right: 0px;width: calc((100% + 10px) / 4 - 10px);text-align: center">就业情况</div>
           </div>

         </div>

         <div v-if="data.currentDisplayUniversityInfo!=undefined" style="width: 100%;margin-top: 10px;color: var(--color-neutral-10)">
           <div v-if="data.currentSchoolPage==0">
             <div class="sritem">
               <p style="font-weight: bold">简介</p>
               {{data.currentDisplayUniversityInfo.content}}
             </div>
             <div style="margin-top: 15px">

               <div v-if="data.currentDisplayUniversityInfo.us_rank!=0" class="sritem" style="width: calc((100% + 10px) / 7 - 10px);display: inline-block;margin-right: 10px;height: 90px">
                 <p style="font-weight: bold">US世界排名</p>
                 <p>{{data.currentDisplayUniversityInfo.us_rank}}</p>
               </div>

               <div v-if="data.currentDisplayUniversityInfo.xyh_rank!=0" class="sritem" style="width: calc((100% + 10px) / 7 - 10px);display: inline-block;margin-right: 10px;height: 90px">
                 <p style="font-weight: bold">校友会排名</p>
                 <p>{{data.currentDisplayUniversityInfo.xyh_rank}}</p>
               </div>

               <div v-if="data.currentDisplayUniversityInfo.ruanke_rank!=0" class="sritem" style="width: calc((100% + 10px) / 7 - 10px);display: inline-block;margin-right: 10px;height: 90px">
                 <p style="font-weight: bold">软科排名</p>
                 <p>{{data.currentDisplayUniversityInfo.ruanke_rank}}</p>
               </div>

               <div v-if="data.currentDisplayUniversityInfo.num_doctor!=0 || data.currentDisplayUniversityInfo.num_doctor2!=0" class="sritem" style="width: calc((100% + 10px) / 7 - 10px);display: inline-block;margin-right: 10px;height: 90px">
                 <p style="font-weight: bold">博士点数量</p>
                 <p>一级：{{data.currentDisplayUniversityInfo.num_doctor}}</p>
                 <p>二级：{{data.currentDisplayUniversityInfo.num_doctor2}}</p>
               </div>

               <div v-if="data.currentDisplayUniversityInfo.num_master!=0 || data.currentDisplayUniversityInfo.num_master2!=0" class="sritem" style="width: calc((100% + 10px) / 7 - 10px);display: inline-block;margin-right: 10px;height: 90px">
                 <p style="font-weight: bold">硕士点数量</p>
                 <p>一级：{{data.currentDisplayUniversityInfo.num_master}}</p>
                 <p>二级：{{data.currentDisplayUniversityInfo.num_master2}}</p>
               </div>

               <div v-if="data.currentDisplayUniversityInfo.num_subject!=0" class="sritem" style="width: calc((100% + 10px) / 7 - 10px);display: inline-block;margin-right: 10px;height: 90px">
                 <p style="font-weight: bold">国家重点学科数量</p>
                 <p>{{data.currentDisplayUniversityInfo.num_subject}}</p>
               </div>

               <div v-if="data.currentDisplayUniversityInfo.gbh_num!=0" class="sritem" style="width: calc((100% + 10px) / 7 - 10px);display: inline-block;margin-right: 0px;height: 90px">
                 <p style="font-weight: bold">科研项目数量</p>
                 <p>{{data.currentDisplayUniversityInfo.gbh_num}}</p>
               </div>

             </div>
             <div v-if="data.currentDisplayUniversityInfo.dualclass.length!=0" class="sritem" style="margin-top: 10px">
               <p style="font-weight: bold">双一流建设学科</p>
               <span v-for="item in data.currentDisplayUniversityInfo.dualclass" style="margin-right: 10px">{{item.class}}</span>
             </div>
             <div v-if="data.currentDisplayUniversityInfo.special.length!=0" class="sritem" style="margin-top: 15px">
               <p style="font-weight: bold">国家特色专业</p>
               <span v-for="item in data.currentDisplayUniversityInfo.special" style="margin-right: 10px">{{item.special_name}}</span>
             </div>
             <div v-if="data.currentSchoolSpecials.length!=0" class="sritem" style="margin-top: 15px">
               <p style="font-weight: bold">开设专业</p>
               <a-table @row-click="showSchoolSpecialContent" style="margin-top: 5px" :data="data.currentSchoolSpecials" :columns="[
                  {
                    dataIndex:'majorName',
                    title:'专业名称'
                  },
                  {
                    dataIndex:'className',
                    title:'类名'
                  },
                  {
                    dataIndex:'bigClassName',
                    title:'大类名'
                  },
                  {
                    dataIndex:'level',
                    title:'批次'
                  },
              ]"></a-table>
             </div>
             <div v-if="data.currentDisplayUniversityInfo.dormitory!=''" class="sritem" style="margin-top: 15px">
               <p style="font-weight: bold">宿舍情况</p>
               {{data.currentDisplayUniversityInfo.dormitory}}
             </div>
             <div v-if="data.currentDisplayUniversityInfo.canteen!=''" class="sritem" style="margin-top: 15px">
               <p style="font-weight: bold">食堂情况</p>
               {{data.currentDisplayUniversityInfo.canteen}}
             </div>
           </div>
           <div v-if="data.currentSchoolPage==1">
             <div>

              <span style="margin-right: 10px;color: var(--color-neutral-10);">
                <span style="margin-right: 10px">省份</span>
                <a-select @change="data.currentSchoolPage1Content=[];getSchoolScoreRank();" :disabled="data.searching" v-model="data.currentSchoolPage1Form.province" style="width: 95px;border: 1px solid var(--color-neutral-4);border-bottom: 1px solid var(--color-neutral-6);border-radius: 5px;  height: 35px;margin-top: 24px;"
                          :style="{
                    backgroundColor:appData.theme.background
                  }"
                >
                  <a-option v-for="item in data.provincesWithoutAll">{{ item }}</a-option>
                </a-select>
              </span>

               <span style="margin-right: 10px;color: var(--color-neutral-10);">
                <span style="margin-right: 10px">年份</span>
                <a-select @change="data.currentSchoolPage1Content=[];getSchoolScoreRank();" :disabled="data.searching" v-model="data.currentSchoolPage1Form.yearSub" style="width: 95px;border: 1px solid var(--color-neutral-4);border-bottom: 1px solid var(--color-neutral-6);border-radius: 5px;  height: 35px;margin-top: 24px;"
                          :style="{
                    backgroundColor:appData.theme.background
                  }"
                >
                  <a-option v-for="item in [(new Date).getFullYear()-1,(new Date).getFullYear()-2,(new Date).getFullYear()-3]">{{ item }}</a-option>
                </a-select>
              </span>

             </div>
             <a-table style="margin-top: 10px" :data="data.currentSchoolPage1Content" :columns="[
                 {title:'专业名称',dataIndex:'majorName'},
                 {title:'学费',dataIndex:'money'},
                 {title:'批次',dataIndex:'batch'},
                 {title:'科目',dataIndex:'claim'},
                 {title:'分数',dataIndex:'score'},
                 {title:'位次',dataIndex:'ranks'},
                 {title:'人数',dataIndex:'num'},
             ]"></a-table>

           </div>
           <div v-if="data.currentSchoolPage==2">
             <a-table @row-click="showSchoolSpecialContent" style="margin-top: 5px" :data="data.currentSchoolSpecials" :columns="[
                  {
                    dataIndex:'majorName',
                    title:'专业名称'
                  },
                  {
                    dataIndex:'className',
                    title:'类名'
                  },
                  {
                    dataIndex:'bigClassName',
                    title:'大类名'
                  },
                  {
                    dataIndex:'level',
                    title:'批次'
                  },
                  {
                    dataIndex:'limitYear',
                    title:'修读年限'
                  },
                  {
                    dataIndex:'degree',
                    title:'学士学位名称'
                  },
              ]"></a-table>
           </div>
           <div v-if="data.currentSchoolPage==3">
             <div class="sritem" style="margin-top: 15px;overflow-x: scroll;text-align: center">
               <p style="font-weight: bold;text-align: left">毕业生签约单位性质</p>
               <div style="width: 100%;height: 400px;display: inline-block" id="schoolJobChart1">

               </div>
             </div>

             <div v-if="Object.keys(data.currentDisplayUniversityInfo.company).length!=0" class="sritem" style="margin-top: 15px;overflow-x: scroll;text-align: center">
               <p style="font-weight: bold;text-align: left">主要签约单位</p>
               <a-table style="margin-top: 5px" :data="getCompanyTableData()" :columns="[
                  {
                    dataIndex:'index',
                    title:'序号'
                  },
                  {
                    dataIndex:'name',
                    title:'单位名称'
                  },
                  {
                    dataIndex:'value',
                    title:'签约人数'
                  }
              ]"></a-table>
             </div>

           </div>
         </div>

       </div>

     </div>

   </div>


   <div id="specialDetailForm" style="width: calc(100% - 70px);height: calc(100vh - 60px);position: fixed;right:0;bottom: 0;overflow-y: scroll;opacity: 0;scale: 1.01;transition-property: opacity,scale ;transition-duration: .3s;transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);padding-bottom: 60px;z-index: 1000;overflow-x: auto;"
        :style="{
      backgroundColor:appData.theme.background,
      display:data.showSpecialDeialForm!=-1?'unset':'none',
      opacity:data.showSpecialDeialForm==1?'1':'0',
      scale:data.showSpecialDeialForm==1?'1':'1.01'
    }"
   >
     <div style="width: 100%;max-width: 1940px;margin: 0 auto;position: relative;min-width: 900px;height: 100%">

       <div v-if="data.currentSpecial.selected!=undefined" style="height: 110px;padding: 40px 44px;padding-bottom: 0">
         <p style="font-size: 24px;display: inline-block;color:var(--color-neutral-10)">
           <span style="line-height: 36px">{{ data.currentSpecial.selected.majorName }}</span>
           <button @click="favoriteSpecialClick" :disabled="homeData.showLoading" v-if="data.currentSpecial.detailInfo!=undefined && data.currentSpecial.detailInfo.isFavorited==false && homeData.loginedUserInfo!=undefined" variant="outlined" style="font-size: 14px;margin-left: 10px;padding: 3.5px 7px">收藏本专业</button>
           <button @click="disFavoriteSpecialClick" :disabled="homeData.showLoading" v-if="data.currentSpecial.detailInfo!=undefined && data.currentSpecial.detailInfo.isFavorited==true && homeData.loginedUserInfo!=undefined" variant="outlined" style="font-size: 14px;margin-left: 10px;padding: 3.5px 7px">取消收藏本专业</button>
           <button @click="controlForward(true,4,data.currentSpecial.selected.mark)" :disabled="homeData.showLoading" v-if="data.currentSpecial.detailInfo!=undefined && homeData.loginedUserInfo!=undefined" variant="outlined" style="font-size: 14px;margin-left: 10px;padding: 3.5px 7px">转发</button>
         </p>
         <br>
         <p style="font-size: 12px;margin-top: 10px;display: inline-block;">
           <span style="padding: 5px 5px;border-radius: 5px;background-color: var(--color-neutral-2);color: var(--color-neutral-10);margin-right: 5px;">{{ data.currentSpecial.selected.level }}</span>
           <span style="padding: 5px 5px;border-radius: 5px;background-color: var(--color-neutral-2);color: var(--color-neutral-10);margin-right: 5px;">{{ data.currentSpecial.selected.className }}</span>
           <span style="padding: 5px 5px;border-radius: 5px;background-color: var(--color-neutral-2);color: var(--color-neutral-10);margin-right: 5px;">{{ data.currentSpecial.selected.bigClassName }}</span>
         </p>
         <svg style="cursor: pointer;color: var(--color-neutral-10);position: absolute;right: 44px;top: 40px;backdrop-filter: blur(5px);z-index: 10000" @click="controlSpecialForm(false)" width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
       </div>

       <div v-if="data.currentSpecial.detailInfo!=undefined" style="margin-top: 20px;height: calc(100% - 70px);overflow-y: scroll;padding: 40px 44px;padding-top: 0;overflow-y: scroll;">

         <div v-if="data.currentSpecial.detailInfo.year!=''" class="sritem" style="width: calc((100% + 10px) / 5 - 10px);display: inline-block;margin-right: 10px;height: 110px">
           <p style="font-weight: bold">学制</p>
           <p>{{data.currentSpecial.detailInfo.year}}</p>
         </div>

         <div v-if="data.currentSpecial.detailInfo.sel_adv!=''" class="sritem" style="width: calc((100% + 10px) / 5 - 10px);display: inline-block;margin-right: 10px;height: 110px">
           <p style="font-weight: bold">选科</p>
           <p>{{data.currentSpecial.detailInfo.sel_adv}}</p>
         </div>

         <div v-if="data.currentSpecial.detailInfo.degree!=''" class="sritem" style="width: calc((100% + 10px) / 5 - 10px);display: inline-block;margin-right: 10px;height: 110px">
           <p style="font-weight: bold">学士学位名称</p>
           <p>{{data.currentSpecial.detailInfo.degree}}</p>
         </div>

         <div v-if="data.currentSpecial.detailInfo.direction!=''" class="sritem" style="width: calc((100% + 10px) / 5 - 10px);display: inline-block;margin-right: 10px;height: 110px">
           <p style="font-weight: bold">就业方向</p>
           <p>{{data.currentSpecial.detailInfo.direction}}</p>
         </div>

         <div v-if="data.currentSpecial.detailInfo.celebrity!=''" class="sritem" style="width: calc((100% + 10px) / 5 - 10px);display: inline-block;margin-right: 0px;height: 110px">
           <p style="font-weight: bold">名人</p>
           <p>{{data.currentSpecial.detailInfo.celebrity}}</p>
         </div>

         <div style="margin-top: 10px" class="sritem">
           <p style="font-weight: bold">专业介绍</p>
           <p v-html="data.currentSpecial.detailInfo.content"></p>
         </div>

         <div style="margin-top: 10px" class="sritem">
           <p style="font-weight: bold">开设课程</p>
           <p v-html="data.currentSpecial.detailInfo.course"></p>
         </div>

         <div style="margin-top: 10px" class="sritem">
           <p style="font-weight: bold">是什么</p>
           <p v-html="data.currentSpecial.detailInfo.isWhat"></p>
         </div>

         <div style="margin-top: 10px" class="sritem">
           <p style="font-weight: bold">学什么</p>
           <p v-html="data.currentSpecial.detailInfo.learnWhat"></p>
         </div>

         <div style="margin-top: 10px" class="sritem">
           <p style="font-weight: bold">做什么</p>
           <p v-html="data.currentSpecial.detailInfo.doWhat"></p>
         </div>

         <p style="font-size: 16px;font-weight: bold;margin-top: 20px;color: var(--color-neutral-10)">开设院校</p>
         <div v-if="data.currentSpecial.openSchool.length!=0" style="width: 100%;max-height: calc(100vh - 280px);overflow-y: scroll;height: auto;border: 1px solid var(--color-neutral-5);padding: 15px 15px;border-radius: 10px;margin-top: 10px;padding-left: 25px;padding-top: 15px">
           <div v-for="item in data.currentSpecial.openSchool" style="border-radius: 5px;display: inline-block;margin-bottom: 24px;"
                :style="{
        width:'calc(100% / ' + data.lineShowNum.toString() + ')'
      }"
           >
             <div class="sritem" style="width: calc(100% - 24px);"
                  :style="{
                height:'240px',
                backgroundColor:appData.theme.background
            }"
             >
               <div v-if="item.sk!=true" style="position: absolute;width: calc(100% - 32px);word-break: break-all;overflow: hidden;max-height: 200px;">
                 <p style="font-size: 18px;font-weight: bold;">{{ item.universityName }}</p>
                 <p >位于{{ getSchoolLocationName(item)  }}</p>
                 <p >办学类型：{{ item.level  }}</p>
                 <p v-if="getSchoolLX(item)!=false">特色：{{ getSchoolLX(item)  }}</p>
                 <p >性质：{{ item.school_nature_name  }}</p>
                 <p v-if="item.type_name!=''">类别：{{ item.type_name  }}</p>
                 <p v-if="item.old_name!=''">旧名：{{ item.old_name  }}</p>
                 <p v-if="item.short!=''">简称：{{ item.short  }}</p>
               </div>
               <div @click="specialSchoolItemClick(item.mark,item)" v-if="item.sk!=true" class="item-wrapper" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(128,128,128,0.1);z-index: 200;"></div>
             </div>
           </div>
         </div>

       </div>

     </div>

   </div>

   <button @click="()=>{
            ctrlCharm('favorite',1)
          }" v-if="homeData.loginedUserInfo!=undefined" title="收藏夹" style="border-radius: 10px;width: 50px;height: 50px;display: inline-block;position: fixed;right: 20px;bottom: 80px;background-color: var(--color-neutral-1);box-shadow: 0 1px 3px rgba(0,0,0,0.1);border: 1px solid rgba(128,128,128,0.2) !important;padding: 0 0 !important;backdrop-filter: blur(20px);color: var(--color-neutral-10);padding-top: 4px !important;z-index: 50000">
     <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 2h32a2 2 0 012 2v40.628a2 2 0 01-2.959 1.755L24.959 38.69a2 2 0 00-1.918 0L8.959 46.383A2 2 0 016 44.628V4a2 2 0 012-2zm2 4v35.256l11.123-6.077a6 6 0 015.754 0L38 41.256V6H10z" fill="currentColor"/></svg>
   </button>

   <button @click="()=>{
            ctrlCharm('aichat',1,getAIChatCharmDataString())
          }" v-if="homeData.loginedUserInfo!=undefined && homeData.loginedUserInfo.isVIP==1" title="AI助手" style="border-radius: 10px;width: 50px;height: 50px;display: inline-block;position: fixed;right: 20px;bottom: 140px;background-color: var(--color-neutral-1);box-shadow: 0 1px 3px rgba(0,0,0,0.1);border: 1px solid rgba(128,128,128,0.2) !important;padding: 0 0 !important;backdrop-filter: blur(20px);color: var(--color-neutral-10);padding-top: 4px !important;z-index: 50000">
     <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M37.291 8.211C34.114 4.88 29.825 3.057 25.17 3.057h-.877l-.316.008c-9.013.34-15.986 8.055-15.908 17.841-.055.054-1.433 1.87-2.515 3.295l-1.23 1.619c-.713.925-1.095 1.76-1.08 2.544.034 2.206 1.415 3.195 4.183 3.804l1.04.219.377 7.898.01.2c.14 1.982 1.826 3.572 3.819 3.572.215 0 6.356-.78 9.328-1.303v-4.178c-2.047.286-6.585.939-9.225 1.37l-.473-9.554-.002-.078a2.996 2.996 0 00-.047-.431 1.326 1.326 0 00-.202-.534c-.215-.293-.476-.498-.812-.498A67.666 67.666 0 019 28.483l-.274-.05-.1-.024a.83.83 0 01-.398-1.315c1.94-2.396 3.027-3.712 3.26-3.947.467-.464.596-.924.596-1.784 0-.102-.005-.191-.018-.331a2.21 2.21 0 01-.015-.195c-.064-3.709 1.255-6.99 3.64-9.61 2.393-2.634 5.689-4.106 9.285-4.133h.193l.313.003c7.167.169 12.62 5.96 12.712 13.606l-.003.297 4.052-.001V20.666c-.07-4.772-1.825-9.209-4.953-12.455zM40 41.001l-5.773-17H30.75L25 41h3.326l1.186-4.032h5.933L36.63 41H40zm4-17v17h-3V24h3zM30.51 34c1.251-4.466 1.9-6.8 1.947-7 .047.2.71 2.534 1.99 7H30.51z" fill="currentColor"/></svg>
   </button>

   <div class="charm" id="favorite">
     <div class="charmInside">
       <div class="charmBgBrush">

       </div>
       <div class="charmTitle">
         收藏夹
         <svg style="float: right;cursor: pointer;" @click="()=>{
           data.charm.favorite.pageId = 1
          ctrlCharm('favorite',0)
        }" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
       </div>
       <div class="charmContent">

         <div v-if="data.charm.favorite.pageId==3">

           <div style="padding: 5px 20px">
             <button style="margin-right: 10px" @click="()=>{
              data.charm.favorite.pageId = 1
            }">返回</button>
             <button @click="async ()=>{
              data.charm.favorite.pageId = 0
              data.charm.favorite.data = (await tool.axiosPostWithCheckStatus(config.serverURL,'/favorite/list',{
                token:homeData.token,
                mark:homeData.loginedUserInfo.mark
              })).results
              data.charm.favorite.pageId = 3
            }">刷新</button>
           </div>

           <div style="width: 100%;height: calc(100vh - 217px);overflow-y: auto;padding: 10px 20px;">
             <p v-if="data.charm.favorite.data.special.length==0">专业收藏夹为空。</p>
             <div v-for="item in data.charm.favorite.data.special" style="border-radius: 5px;display: inline-block;margin-bottom: 24px;"
                  :style="{
        width:'calc(100%)'
      }"
             >
               <div class="sritem" style="width: calc(100%);"
                    :style="{
                height:'140px',
                backgroundColor:appData.theme.background
            }"
               >
                 <div style="position: absolute;width: calc(100% - 32px);word-break: break-all;overflow: hidden;max-height: 200px;">
                   <p style="font-size: 18px;font-weight: bold;">{{ item.majorName }}</p>
                   <p >学制：{{ item.year }}</p>
                   <p >学士学位名称：{{ item.degree  }}</p>
                   <p v-if="item.sel_adv!=''">科目：{{ item.sel_adv  }}</p>
                 </div>
                 <div @click="async ()=>{
                      if(data.showSchollDeialForm!=-1){
                        controlSchoolForm(false)
                        await waitSeconds(0.5)
                      }
                      data.currentSpecial.selected = item
                      getSpecialInfo(item.mark)
                      await waitSeconds(0.2)
                      data.charm.favorite.pageId = 1
                      ctrlCharm('favorite',0)
                    }" v-if="item.sk!=true" class="item-wrapper" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(128,128,128,0.1);z-index: 200;"></div>
               </div>
             </div>
           </div>

         </div>

         <div v-if="data.charm.favorite.pageId==2">

           <div style="padding: 5px 20px">
             <button style="margin-right: 10px" @click="()=>{
              data.charm.favorite.pageId = 1
            }">返回</button>
             <button @click="async ()=>{
              data.charm.favorite.pageId = 0
              data.charm.favorite.data = (await tool.axiosPostWithCheckStatus(config.serverURL,'/favorite/list',{
                token:homeData.token,
                mark:homeData.loginedUserInfo.mark
              })).results
              data.charm.favorite.pageId = 2
            }">刷新</button>
           </div>

           <div style="width: 100%;height: calc(100vh - 217px);overflow-y: auto;padding: 10px 20px;">
             <p v-if="data.charm.favorite.data.school.length==0">学校收藏夹为空。</p>
             <div v-for="item in data.charm.favorite.data.school" style="border-radius: 5px;display: inline-block;margin-bottom: 24px;"
                  :style="{
        width:'calc(100%)'
      }"
             >
               <div class="sritem" style="width: calc(100%);"
                    :style="{
                height:'240px',
                backgroundColor:appData.theme.background
            }"
               >
                 <div v-if="item.sk!=true" style="position: absolute;width: calc(100% - 32px);word-break: break-all;overflow: hidden;max-height: 200px;">
                   <p style="font-size: 18px;font-weight: bold;">{{ item.universityName }}</p>
                   <p >位于{{ getSchoolLocationName(item)  }}</p>
                   <p >办学类型：{{ item.level  }}</p>
                   <p v-if="getSchoolLX(item)!=false">特色：{{ getSchoolLX(item)  }}</p>
                   <p >性质：{{ item.school_nature_name  }}</p>
                   <p v-if="item.type_name!=''">类别：{{ item.type_name  }}</p>
                   <p v-if="item.old_name!=''">旧名：{{ item.old_name  }}</p>
                   <p v-if="item.short!=''">简称：{{ item.short  }}</p>
                 </div>
                 <div @click="async ()=>{
                   schoolItemClick(item.mark,item)
                   await tool.waitSeconds(0.2)
                   data.charm.favorite.pageId = 1
                   ctrlCharm('favorite',0)
                 }" v-if="item.sk!=true" class="item-wrapper" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(128,128,128,0.1);z-index: 200;"></div>
               </div>
             </div>
           </div>

         </div>

         <div v-if="data.charm.favorite.pageId==1" style="padding: 10px 20px">
           <p style="margin-bottom: 10px">请选择收藏夹类型</p>
           <button style="width: 80px;text-align: center;padding: 10px 0;margin-right: 10px" @click="async ()=>{
            data.charm.favorite.pageId = 0
            data.charm.favorite.data = (await tool.axiosPostWithCheckStatus(config.serverURL,'/favorite/list',{
              token:homeData.token,
              mark:homeData.loginedUserInfo.mark
            })).results
            data.charm.favorite.pageId = 2
          }">
             <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor" ><path fill-rule="evenodd" clip-rule="evenodd" d="M22.432 1.914l.103.056 21 13.281a1 1 0 01.457.718l.008.127V46a1 1 0 01-.883.993L43 47H5a1 1 0 01-.993-.883L4 46V25.118a1 1 0 01.445-.832l.108-.062L21 15.999V2.816a1 1 0 01.1-.436l.055-.099a1 1 0 011.277-.367zM25 8.262V43h6v-6.281a1 1 0 011-1h3a1 1 0 011 1v6.28L40 43V17.749L25 8.262zM8 26.972l13-6.5V43H8V26.972z" fill="currentColor"/></svg>
             <br>
             <span>院校</span>
           </button>
           <button style="width: 80px;text-align: center;padding: 10px 0"@click="async ()=>{
            data.charm.favorite.pageId = 0
            data.charm.favorite.data = (await tool.axiosPostWithCheckStatus(config.serverURL,'/favorite/list',{
              token:homeData.token,
              mark:homeData.loginedUserInfo.mark
            })).results
              console.log(data.charm.favorite.data)
            data.charm.favorite.pageId = 3
          }">
             <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M42.937 10.952L24.922 2.407a2 2 0 00-1.715 0L5.22 10.951a2 2 0 00-1.141 1.807V35.22a2 2 0 001.14 1.806l17.985 8.564a2 2 0 001.719 0l18.014-8.565a2 2 0 001.142-1.806V12.759a2 2 0 00-1.143-1.807zM8.08 33.958V16.894l13.849 6.951.036.019.256 16.827L8.08 33.958zm32-17.068l-13.977 6.962-.136.062.252 16.632 13.86-6.59V16.89zM9.72 13.24l14.346-6.812 14.366 6.813-14.113 7.03a.666.666 0 01-.596 0L9.721 13.24z" fill="currentColor"/></svg>
             <br>
             <span>专业</span>
           </button>
         </div>

         <div v-if="data.charm.favorite.pageId==0" style="padding: 10px 20px">
           <div style="--size: 24px; --dot-size: 3px; --dot-count: 6; --color: var(--color-neutral-10); --speed: 1s; --spread: 60deg;" class="dots">
             <div style="--i: 0;" class="dot"></div>
             <div style="--i: 1;" class="dot"></div>
             <div style="--i: 2;" class="dot"></div>
             <div style="--i: 3;" class="dot"></div>
             <div style="--i: 4;" class="dot"></div>
             <div style="--i: 5;" class="dot"></div>
           </div><span>请稍后...</span>
         </div>

       </div>
     </div>
   </div>

 </div>
</template>

<script>
import tool, {waitSeconds} from '@/utlis/tool';
import config from '@/config';
import * as echarts from 'echarts';


export default{
  computed:{
    tool(){
      return tool
    },
    config(){
      return config
    }
  },
  components:{
    
  },
  data(){
    return{
      data:{
        searchForm:{
          input:'',
          searchType:0,
          searchTypeName:'学校',
          p:'全部',
          ts:'全部',
          xz:'全部',
          lb:'全部',
          lx:'全部',
          page:1,
          size:24,
          toPage:0,
          warningText:'',
          admittedOnly:false,
          scoreUp:20,
          scoreDown:30
        },
        pageStatus:0,
        showSearchRecomment:false,
        provinces:[],
        provincesWithoutAll:[],
        searching:false,
        results:[{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true}],
        resultsM:[{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true},{sk:true}],
        total:0,
        lineShowNum:4,
        currentDisplayUniversityInfo:undefined,
        currentDisplayUniversityInfoByClick:undefined,
        showSchollDeialForm:-1,
        showSpecialDeialForm:-1,
        currentSchoolImages:[],
        currentSchoolPage:0,
        currentSchoolSpecials:[],
        currentSchoolPage1Content:[],
        currentSchoolPage1Form:{
          province:this.homeData.loginedUserInfo==undefined?'':this.homeData.loginedUserInfo.province,
          yearSub:(new Date).getFullYear() - 1,
        },
        currentSpecial:{
          selected:undefined,
          detailInfo:undefined,
          openSchool:[],
        },
        charm:{
          data:undefined,
          favorite:{
            pageId:1,
            data:undefined
          },
          aichat:{
            status:0,
          }
        }
      },
      func:{
        getPageTotal:undefined
      }
    }
  },
  async mounted(){
    this.func.getPageTotal = tool.getPageTotal

    await tool.waitSeconds(0.001)

    this.data.pageStatus = 1

    if(localStorage.getItem('searchAutoOpen')!=null){
      let re = JSON.parse(localStorage.getItem('searchAutoOpen'))
      localStorage.removeItem('searchAutoOpen')
      this.schoolItemClick(re.mark,re)
      this.getInputResult(false)
    }else{
      if(localStorage.getItem('searchAutoOpenMajor')!=null){
        let re = JSON.parse(localStorage.getItem('searchAutoOpenMajor'))
        localStorage.removeItem('searchAutoOpenMajor')
        this.data.currentSpecial.selected = re
        this.getSpecialInfo(re.mark)
        this.getInputResult(false)
      }else{
        this.getInputResult()
      }
    }
    this.getProvinces()

    setInterval(() => {
      this.data.lineShowNum = 4
      if(this.appData.pageSize.width<1200){
        this.data.lineShowNum = 3
      }
      if(this.appData.pageSize.width<800){
        this.data.lineShowNum = 2
      }
      if(this.appData.pageSize.width<660){
        this.data.lineShowNum = 1
      }
    }, 10);

  },
  methods:{
    waitSeconds,
    getAIChatCharmDataString(){
      if(this.data.showSchollDeialForm!=-1){
        return JSON.stringify(this.data.currentDisplayUniversityInfo) + '\n\n高考考生信息：' + JSON.stringify(this.homeData.loginedUserInfo)
      }
      if(this.data.showSpecialDeialForm!=-1){
        return JSON.stringify(this.data.currentSpecial.detailInfo) + '\n\n高考考生信息：' + JSON.stringify(this.homeData.loginedUserInfo)
      }
      return '高考考生信息：' + JSON.stringify(this.homeData.loginedUserInfo)
    },
    specialSchoolItemClick(mark,item){
      // this.controlSpecialForm(0)
      setTimeout(()=>{
        this.schoolItemClick(mark,item)
      },1)
    },
    async getSpecialOpenSchool(){
      let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/search/specialOpenSchool',{
        level:this.data.currentSpecial.selected.level.indexOf('本科')==-1?'专科':'本科',
        majorName:this.data.currentSpecial.selected.majorName,
      })
      this.data.currentSpecial.openSchool = re.results
    },
    async disFavoriteSpecialClick(){
      this.controlLoading(true)
      await tool.axiosPostWithCheckStatus(config.serverURL,'/search/favorite',{
        token:this.homeData.token,
        userMark:this.homeData.loginedUserInfo.mark,
        itemMark:this.data.currentSpecial.selected.mark,
        type:'special',
        op:'delete'
      })
      this.data.currentSpecial.detailInfo.isFavorited = false
      this.controlLoading(false)
    },
    async favoriteSpecialClick(){
      if(this.homeData.loginedUserInfo==undefined){
        this.ctrlForm('loginPromptForm',true)
        return
      }
      this.controlLoading(true)
      await tool.axiosPostWithCheckStatus(config.serverURL,'/search/favorite',{
        token:this.homeData.token,
        userMark:this.homeData.loginedUserInfo.mark,
        itemMark:this.data.currentSpecial.selected.mark,
        type:'special',
        op:'add'
      })
      this.data.currentSpecial.detailInfo.isFavorited = true
      this.controlLoading(false)
    },
    async getSpecialInfo(mark){
      this.getSpecialOpenSchool()
      this.data.currentSpecial.detailInfo = undefined
      this.data.currentSpecial.openSchool = []
      this.controlSpecialForm(true)
      this.controlLoading(true)
      let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/search/specialInfo',{
        mark:mark,
        userMark:(this.homeData.loginedUserInfo==undefined?'':this.homeData.loginedUserInfo.mark)
      })
      this.changeAIChatContentHide(JSON.stringify(re))
      this.controlLoading(false)
      this.data.currentSpecial.detailInfo = re.results
    },
    fileDBGroupedResultGetCurrentGroupTitle(arr,titleName){
      if(Array.isArray(arr)){
        return this.fileDBGroupedResultGetCurrentGroupTitle(arr[0],titleName)
      }else{
        return arr[titleName]
      }
    },
    getCompanyTableData(){
      let c = this.data.currentDisplayUniversityInfo.company
      let re = []
      for(let i=0;i<Object.keys(c).length;i++){
        re.push({
          index:i+1,
          name:Object.keys(c)[i],
          value:c[Object.keys(c)[i]]
        })
      }
      return re
    },
    async showSchoolJobChart(){
      setTimeout(()=>{
        var myChart = echarts.init(document.getElementById('schoolJobChart1'));
        myChart.setOption({
          tooltip: {},
          xAxis: {
            data: Object.keys(this.data.currentDisplayUniversityInfo.attr)
          },
          yAxis: {},
          series: [
            {
              name: '百分比',
              type: 'bar',
              data: Object.values(this.data.currentDisplayUniversityInfo.attr)
            }
          ]
        });
      },1)
    },
    async showSchoolSpecialContent(e){
      this.controlLoading(true)
      this.ctrlForm('contentForm',true,{
        title:'专业介绍',
        content:'正在获取，请稍后'
      })
      let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/search/schoolSpecialContent',{
        mark:e.mark,
        level:e.level.indexOf('本科')==-1?'专科':'本科'
      })
      this.changeAIChatContentHide(JSON.stringify(this.data.currentDisplayUniversityInfo) + JSON.stringify(re))
      // this.changeAIChatContentHide(JSON.stringify(this.data.currentDisplayUniversityInfoByClick) + '食堂介绍：' + this.data.currentDisplayUniversityInfo.canteen + '宿舍介绍：' + this.data.currentDisplayUniversityInfo.dormitory + '学校介绍：' + this.data.currentDisplayUniversityInfo.content + JSON.stringify(re))
      this.ctrlForm('contentForm',true,{
        title:'专业介绍',
        content:re.results
      })
      this.controlLoading(false)
    },
    async disFavoriteSchoolClick(){
      this.controlLoading(true)
      await tool.axiosPostWithCheckStatus(config.serverURL,'/search/favorite',{
        token:this.homeData.token,
        userMark:this.homeData.loginedUserInfo.mark,
        itemMark:this.data.currentDisplayUniversityInfoByClick.mark,
        type:'school',
        op:'delete'
      })
      this.data.currentDisplayUniversityInfo.isFavorited = false
      this.controlLoading(false)
    },
    async favoriteSchoolClick(){
      if(this.homeData.loginedUserInfo==undefined){
        this.ctrlForm('loginPromptForm',true)
        return
      }
      this.controlLoading(true)
      await tool.axiosPostWithCheckStatus(config.serverURL,'/search/favorite',{
        token:this.homeData.token,
        userMark:this.homeData.loginedUserInfo.mark,
        itemMark:this.data.currentDisplayUniversityInfoByClick.mark,
        type:'school',
        op:'add'
      })
      this.data.currentDisplayUniversityInfo.isFavorited = true
      this.controlLoading(false)
    },
    async getSchoolScoreRank(){
      this.controlLoading(true)
      let re = (await tool.axiosPostWithCheckStatus(config.serverURL,'/search/specialScoreMin',{
        universityName:this.data.currentDisplayUniversityInfoByClick.universityName,
        province:this.data.currentSchoolPage1Form.province,
        yearSub:(new Date).getFullYear() - this.data.currentSchoolPage1Form.yearSub
      }))
      this.data.currentSchoolPage1Content = re.results
      this.controlLoading(false)
    },
    async getSchoolSpecial(){
      let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/search/schoolSpecial',{
        universityName:this.data.currentDisplayUniversityInfoByClick.universityName
      })
      this.data.currentSchoolSpecials = re.results
    },
    openLink(url){
      window.open(url,'_blank')
    },
    async getSchoolImages(){
      let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/search/schoolImages',{
        name:this.data.currentDisplayUniversityInfoByClick.universityName,
        mark:this.data.currentDisplayUniversityInfoByClick.mark
      })
      this.data.currentSchoolImages = re.results
    },
    controlSchoolForm(op){
      if(op){
        this.data.showSchollDeialForm = 0
        setTimeout(() => {
          this.data.showSchollDeialForm = 1
        }, 1);
      }else{
        this.data.showSchollDeialForm = 0
        setTimeout(() => {
          this.data.showSchollDeialForm = -1
        }, 500);
      }
    },
    controlSpecialForm(op){
      if(op){
        this.data.showSpecialDeialForm = 0
        setTimeout(() => {
          this.data.showSpecialDeialForm = 1
        }, 1);
      }else{
        this.data.showSpecialDeialForm = 0
        setTimeout(() => {
          this.data.showSpecialDeialForm = -1
        }, 500);
      }
    },
    async schoolItemClick(mark,item){
      this.data.currentDisplayUniversityInfo = undefined
      this.data.currentDisplayUniversityInfoByClick = item
      this.data.currentSchoolImages = []
      this.data.currentSchoolSpecials = []
      this.data.currentSchoolPage = 0
      if(this.homeData.loginedUserInfo==undefined){
        this.data.currentSchoolPage1Form.province = this.data.provincesWithoutAll[0]
      }else{
        this.data.currentSchoolPage1Form.province = this.homeData.loginedUserInfo.province
      }
      await tool.waitSeconds(0.001)
      this.controlSchoolForm(true)
      await tool.waitSeconds(0.001)
      this.getSchoolFullInfo(mark)
      this.getSchoolImages()
      this.getSchoolSpecial()
      this.getSchoolScoreRank()
    },
    async getSchoolFullInfo(mark){
      this.controlLoading(true)
      let re = (await tool.axiosPostWithCheckStatus(config.serverURL,'/search/schoolInfo',{
        mark:mark,
        userMark:this.homeData.loginedUserInfo==undefined?'':this.homeData.loginedUserInfo.mark
      }))
      this.controlLoading(false)
      this.data.currentDisplayUniversityInfo = tool.JSONparseAllJSONKeys(re.results)
      this.changeAIChatContentHide(JSON.stringify(this.data.currentDisplayUniversityInfo) + '食堂介绍：' + this.data.currentDisplayUniversityInfo.canteen + '宿舍介绍：' + this.data.currentDisplayUniversityInfo.dormitory + '学校介绍：' + this.data.currentDisplayUniversityInfo.content)
      // this.changeAIChatContentHide(JSON.stringify(this.data.currentDisplayUniversityInfoByClick) + '食堂介绍：' + this.data.currentDisplayUniversityInfo.canteen + '宿舍介绍：' + this.data.currentDisplayUniversityInfo.dormitory + '学校介绍：' + this.data.currentDisplayUniversityInfo.content)
    },
    getSchoolLX(item){
      let re = ''
      if(item.is985=='是'){
        if(re!='')re+='、'
        re+='985'
      }
      if(item.is211=='是'){
        if(re!='')re+='、'
        re+='211'
      }
      if(item.isQJ=='是'){
        if(re!='')re+='、'
        re+='强基计划'
      }
      if(item.isDualClass=='是'){
        if(re!='')re+='、'
        re+='双一流'
      }
      if(re==''){
        return ''
      }else{
        return re
      }
    },
    getSchoolLocationName(item){
      if(item.city.indexOf(item.p)==-1){
        return item.p + '省' + item.city
      }else{
        return item.city
      }
    },
    async getProvinces(){
      let re = (await tool.axiosPostWithCheckStatus(config.serverURL,'/provincesAndSubjects',{
        token:this.homeData.token
      })).results
      let re0 = ['全部']
      let re01 = []
      for(let i=0;i<re.length;i++){
        re0.push(re[i].name)
        re01.push(re[i].name)
      }
      this.data.provinces = re0
      this.data.provincesWithoutAll = re01
    },
    searchInput(){
      this.data.showSearchRecomment = true
    },
    async getInputResult(hideAllForm=true){
      this.data.total = 0
      this.data.results = JSON.parse(JSON.stringify(this.data.resultsM))
      this.controlLoading(true)
      this.data.searching = true
      if(this.data.searchForm.searchTypeName=='学校'){
        this.data.searchForm.searchType = 0
      }else{
        this.data.searchForm.searchType = 1
      }
      if(hideAllForm){
        this.controlSchoolForm(0)
        this.controlSpecialForm(0)
      }

      let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/search/input',{
        token:this.homeData.token,
        input:this.data.searchForm.input,
        searchType:this.data.searchForm.searchType,
        p:this.data.searchForm.p,
        ts:this.data.searchForm.ts,
        xz:this.data.searchForm.xz,
        lb:this.data.searchForm.lb,
        lx:this.data.searchForm.lx,
        page:this.data.searchForm.page,
        size:this.data.searchForm.size,
        admittedOnly:this.data.searchForm.admittedOnly,
        scoreUp:this.data.searchForm.scoreUp,
        scoreDown:this.data.searchForm.scoreDown,
        province:this.homeData.loginedUserInfo==undefined?"":this.homeData.loginedUserInfo.province,
        ranks:this.homeData.loginedUserInfo==undefined?"":this.homeData.loginedUserInfo.ranks,
        score:this.homeData.loginedUserInfo==undefined?"":this.homeData.loginedUserInfo.score,
        subjects:this.homeData.loginedUserInfo==undefined?"":this.homeData.loginedUserInfo.subjects,
      })
      this.data.searching = false
      this.controlLoading(false)
      this.data.results = re.results.data
      this.changeAIChatContentHide(JSON.stringify(this.data.results))
      this.data.total = re.results.total
      this.data.searchForm.toPage = this.data.searchForm.page
    },
    changeAIChatContentHide(content){
      this.$emit('changeAIChatContentHide',content)
    }
  },
  props:{
    appData: undefined,
    homeData: undefined,
    controlLoading: undefined,
    ctrlCharm:undefined,
    ctrlForm:undefined,
    controlForward:undefined
  },
}
</script>

<style scoped>

.sritem:hover .item-wrapper{
  opacity: 1;
}

.item-wrapper{
  opacity: 0;
  display: inline-block;
}

.sritem{
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  color: var(--color-neutral-10);
  border: 1px solid var(--color-neutral-3);
  background-color: var(--color-neutral-1);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
}

.sritem-ns{
  position: relative;
  color: var(--color-neutral-8);
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  line-height: 45px;
  font-size: 16px;
  border-bottom: 2px solid transparent;
}

.sritem-ns:hover{
  color: var(--color-neutral-10);
}

.sritem-ns:active{
  color: var(--color-neutral-9);
}

.sritem:hover{
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background-color: var(--color-neutral-2);
}

.sritem-selected{
  position: relative;
  color: var(--color-neutral-10);
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  line-height: 45px;
  font-size: 16px;
  border-bottom: 2px solid rgb(0,120,215);
  font-weight: bold;
}

.sritem-selected:hover{
  color: var(--color-neutral-8);
}

.sritem-selected:active{
  color: var(--color-neutral-9);
}

.search-item-selected{
  color: rgb(0,120,215);
}
.search-item:hover{
  color: rgb(0,120,215);
  cursor: pointer;
}
.search-item{
  color: var(--color-neutral-10);
}
.item{
  padding: 10px 10px;
  /* background-color: var(--color-neutral-1); */
  color: var(--color-neutral-10);
  cursor: pointer;
}
.item:hover{
  /* background-color: var(--color-neutral-3); */
  background-color: rgba(128,128,128,0.2);
}
.item:active{
  /* background-color: var(--color-neutral-2); */
  background-color: rgba(128,128,128,0.1);
}
.searchInput{
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.searchInput:focus{
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  outline: none !important;;
}

.charmBgBrush{
  background-color: var(--color-neutral-1);
  opacity: 0.8;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 200000;
}

.charmContent{
  width: 100%;
  height: calc(100% - 57px);
  position: relative;
  z-index: 200005;
  color: var(--color-neutral-10);
}

.charmTitle{
  padding: 20px 20px;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  z-index: 200005;
  color: var(--color-neutral-10);
}

.charmInside{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-neutral-3);
}

.charm{
  position: fixed;
  height: 100vh;
  width: 100%;
  max-width: 450px;
  right: 0;
  top: 0;
  z-index: 100000;
  transition: transform .5s cubic-bezier(0.23, 1, 0.320, 1);
  transform: translateX(100%);
  padding: 40px 44px;
  padding-top: 75px;
  padding-right: 30px;
}

</style>